<script setup>

</script>

<template>
  <div class="consultation-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span>咨询管理</span>
        <div style="display: flex; justify-content: flex-end;">
          <el-tooltip class="item" effect="dark" content="咨询" placement="top" style="margin-right: 75px">
            <el-badge  class="item">
              <el-button @click="declare()" size="mini" type="primary" icon="el-icon-magic-stick" circle></el-button>
            </el-badge>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="返回" placement="top" style="margin-right: 70px">
            <el-badge  class="item">
              <el-button @click="back()" size="mini" type="primary" icon="el-icon-thumb" circle></el-button>
            </el-badge>
          </el-tooltip>
        </div>
      </div>
      <el-table :data="pagedData" style="width: 1400px; margin: auto">
        <el-table-column prop="msg_id" label="消息ID" width="180"></el-table-column>
        <el-table-column prop="message" label="消息内容"></el-table-column>
        <el-table-column prop="date" label="日期" width="200">
          <template v-slot="scope">
            <!-- 使用formatDate函数格式化日期 -->
            {{ formatDate(scope.row.date) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页控件 -->
      <br>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="prev, pager, next, total"
          :total="AllData.length">
      </el-pagination>
      <el-dialog
          :visible.sync="dialogVisible1"
          :title="'咨询'"
          width="30%"
          @close="dialogVisible1 = false">
        <el-input
            type="textarea"
            v-model="inputContent"
            placeholder="请输入咨询信息"
            rows="10"></el-input>
        <span slot="footer" class="dialog-footer">
      <el-button @click="cancledeclare">取消</el-button>
      <el-button type="primary" @click="senddeclare">发送</el-button>
    </span>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";

export default {
  name: "NoticeView",
  data() {
    return {
      AllData: [],
      currentPage: 1,
      pageSize: 10,
      pagedData: [],
      dialogVisible: false,
      dialogVisible1: false,
      inputContent: '',
      total: 0, // 总数据量
      userid: 0,// 假设的当前用户ID
    };
  },
  methods: {
    declare(){
      this.dialogVisible1 = true;
    },
    senddeclare(){
      // 组装要发送的数据
      const postData = {
        from_whom: this.userid,
        content: this.inputContent
      };
      // 发送 POST 请求
      axios.post('http://127.0.0.1:5000/v1/users/createConsultation', postData)
          .then(response => {
            // 请求成功处理
            console.log(response.data);
            // 清空输入区或做其他操作
            this.inputContent = '';
            this.dialogVisible1 = false;  // 如果需要在发送后关闭对话框
            this.$message({
              message: '发送成功',
              type: 'success'
            });
          })
          .catch(error => {
            // 请求失败处理
            console.error('发送消息失败:', error);
            alert('发送消息失败！');
          });
    },
    cancledeclare(){
      this.inputContent = ''; // 清空输入框
      this.dialogVisible1 = false;
    },
    formatDate(dateStr) {
      const date = new Date(dateStr);
      return date.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
    },
    back(){
      this.$router.push('/userborrowview');
    },
  },

  mounted() {
    this.username = Cookies.get('username');
    this.password = Cookies.get('password');
    this.userid = Cookies.get('userid');

    axios.get(`http://127.0.0.1:5000/v1/messages/get_messages/${this.userid}`, {
      headers: {'token': Cookies.get('token')}
    }).then((response) => {
      this.AllData= response.data.data;
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.pagedData = this.AllData.slice(start, end);
      console.log(this.AllData);
    }).catch((error) => {
      console.error("Error loading data:", error);
    });
  }
};
</script>
<style scoped>
.consultation-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('../assets/1.png'); /* 替换 'path/to/your/image.jpg' 为你的图片路径 */
  background-size: cover; /* 覆盖整个容器 */
  background-position: center; /* 图片居中显示 */
}

.el-table .danger {
  background-color: #f56c6c;
  color: #fff;
}

.el-table .success {
  background-color: #67c23a;
  color: #fff;
}

.el-table .cell {
  padding: 8px; /* 默认为10px; 调整根据需求 */
}
.box-card{
  opacity: 0.9; /* 设置透明度为 50% */
  /* 如果你需要的话，也可以设置背景色 */
  background-color: rgba(255, 255, 255, 0.5); /* 同时通过 rgba 设置半透明的背景色 */
}

</style>